<template>
  <div>
    <a-row>
      <a-col :span="12">
        <a-form-item
          :labelCol="{ span: 6 }"
          :wrapperCol="{ span: 18 }"
          label="标题"
        >
          <a-input style="width: 200px" v-model:value="data.name"></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item
          :labelCol="{ span: 6 }"
          :wrapperCol="{ span: 18 }"
          label="显示序号"
        >
          <a-checkbox v-model:checked="data.options.serialNumberVisible">
            是否显示序号
          </a-checkbox>
        </a-form-item>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="12">
        <a-form-item
          :labelCol="{ span: 6 }"
          :wrapperCol="{ span: 18 }"
          required
          label="从表"
        >
          <a-select
            @change="dbChange"
            v-model:value="data.options.linktable"
            style="width: 200px"
          >
            <a-select-option
              v-for="(item, index) in linktableData"
              :key="index"
              :value="item.name"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item
          :labelCol="{ span: 6 }"
          :wrapperCol="{ span: 18 }"
          required
          label="主表字段"
          v-if="data.type != 'grid'"
        >
          <a-select
            @change="fileChange"
            v-model:value="data.field"
            style="width: 200px"
          >
            <a-select-option
              v-for="(item, index) in tableFiledData"
              :key="index"
              :value="item.columnName"
            >
              {{ item.columnName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-form-item
          :labelCol="{ span: 6 }"
          :wrapperCol="{ span: 18 }"
          required
          label="从表主键"
        >
          <a-select
            v-model:value="data.options.fromtablekey"
            style="width: 200px"
          >
            <a-select-option
              v-for="(item, index) in fromtableFiledData"
              :key="index"
              :value="item.columnName"
            >
              {{ item.columnName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item
          :labelCol="{ span: 6 }"
          :wrapperCol="{ span: 18 }"
          required
          label="关联字段"
        >
          <a-select
            v-model:value="data.options.associatedFields"
            style="width: 200px"
          >
            <a-select-option
              v-for="(item, index) in fromtableFiledData"
              :key="index"
              :value="item.columnName"
            >
              {{ item.columnName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <vxe-table stripe height="450" :data="data.options.tableSetting">
      <vxe-table-column width="80px" title="字段显示">
        <template v-slot="{ row }">
          <a-checkbox v-model:checked="row.isVisible">
            <span style="margin-left: 3px">{{ row.columnName }}</span>
          </a-checkbox>
        </template>
      </vxe-table-column>
      <vxe-table-column title="显示名称">
        <template v-slot="{ row }">
          <a-input v-model:value="row.lable"></a-input>
        </template>
      </vxe-table-column>
      <vxe-table-column width="100px" title="对齐方式">
        <template v-slot="{ row }">
          <a-select v-model:value="row.algin">
            <a-select-option value="left">右对齐</a-select-option>
            <a-select-option value="right">左对齐</a-select-option>
            <a-select-option value="center">居中</a-select-option>
          </a-select>
        </template>
      </vxe-table-column>
      <vxe-table-column title="编辑模式">
        <template v-slot="{ row, rowIndex }">
          <a-input disabled style="color: red" v-model:value="row.setting.type">
            <template #addonAfter>
              <UnorderedListOutlined @click="openSetting(rowIndex)" />
            </template>
          </a-input>
        </template>
      </vxe-table-column>

      <vxe-table-column width="80px" title="宽度">
        <template v-slot="{ row }">
          <a-input-number
            style="width: 68px"
            placeholder="请输入"
            v-model:value="row.width"
          ></a-input-number>
        </template>
      </vxe-table-column>
      <vxe-table-column width="80px" title="顺序">
        <template v-slot="{ row }">
          <a-input-number
            style="width: 68px"
            placeholder="请输入"
            v-model:value="row.sort"
          ></a-input-number>
        </template>
      </vxe-table-column>
      <vxe-table-column title="说明" field="note"></vxe-table-column>
    </vxe-table>
    <vxe-modal
      resize
      width="700"
      title="选择组件"
      :key="modalkey"
      v-model="componentSettingVisible"
    >
      <template v-slot>
        <div style="min-height: 500px">
          <div class="ml-3">
            编辑模式：
            <a-select
              style="width: 40%"
              v-model:value="data.options.tableSetting[selectIndex].editType"
              @change="componentChange"
            >
              <a-select-option value="">默认</a-select-option>
              <a-select-option value="0">文本框</a-select-option>
              <a-select-option value="1">选择框</a-select-option>
              <a-select-option value="2">计数器</a-select-option>
              <a-select-option value="3">单选框</a-select-option>
              <a-select-option value="4">复选框</a-select-option>
              <a-select-option value="5">日期选择</a-select-option>
              <a-select-option value="7">开关</a-select-option>
            </a-select>
          </div>
          <a-divider>组件配置</a-divider>
          <widget-config
            :key="widgetconfigKey"
            :filedList="tableFiledData"
            v-model:dataAfferent="
              data.options.tableSetting[selectIndex].setting
            "
          ></widget-config>
          <!-- <div style="text-align: center">
            <a-divider></a-divider>
            <a-button type="primary" >确定</a-button>
            <a-button class="ml-2" >取消</a-button>
          </div> -->
        </div>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
  import { Gettables, Getfileds } from '@/api/databaselink/api'
  import WidgetConfig from './WidgetConfig'
  import { basicComponents } from '../componentsConfig'
  import { UnorderedListOutlined } from '@ant-design/icons-vue'
  export default {
    components: {
      WidgetConfig,
      UnorderedListOutlined,
    },
    props: {
      dataAfferent: {
        type: Object,
        default: Object,
      },
      formData: {
        type: Object,
        default: Object,
      },
      tableFiledData: {
        type: Array,
        default: Array,
      },
    },
    data() {
      return {
        linktableData: [],
        fromtableFiledData: [],
        componentSettingVisible: false,

        widgetconfigKey: '',
        selectIndex: '',
        modalkey: '',
        data: this.dataAfferent,
      }
    },

    created() {
      // console.log('data', this.data)
      // console.log('formData', this.formData)
      Gettables({ id: this.formData.linkDb }).then((res) => {
        if (res.isSuccess) {
          this.linktableData = res.content
          // 从表字段
          Getfileds({
            id: this.formData.linkDb,
            table: this.data.options.linktable,
          }).then((res) => {
            if (res.isSuccess) {
              this.fromtableFiledData = res.content
            }
          })
        }
      })
    },
    methods: {
      openSetting(index) {
        this.selectIndex = index
        this.componentSettingVisible = true
        this.widgetconfigKey = new Date().getTime()
      },
      componentChange(e) {
        if (e !== '') {
          this.data.options.tableSetting[this.selectIndex].setting = JSON.parse(
            JSON.stringify(basicComponents[e])
          )
          this.data.options.tableSetting[
            this.selectIndex
          ].setting.table = this.data.options.linktable
          this.data.options.tableSetting[
            this.selectIndex
          ].setting.field = this.data.options.tableSetting[
            this.selectIndex
          ].columnName
          //  console.log(this.data.options.tableSetting[this.selectIndex].setting)
          this.widgetconfigKey = new Date().getTime()
        } else {
          this.data.options.tableSetting[this.selectIndex].setting = undefined
        }
      },
      fileChange() {
        this.$emit('changeTable')
      },
      dbChange(e) {
        Getfileds({ id: this.formData.linkDb, table: e }).then((res) => {
          if (res.isSuccess) {
            res.content.forEach((element) => {
              element.setting = {}
            })
            this.data.options.tableSetting = res.content
            this.fromtableFiledData = res.content
          }
        })
      },
    },
  }
</script>
